<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        p {
            color: rebeccapurple;
            font-size: 20px;
        }
        .blue {
            color: blue;
        }
        .box {
            color: blanchedalmond;
        }
        * {
            font-size: 60px;
        }
        #one{
            color: green;
        }
        div ul li{
            color: purple;
        }
        .shandong li {
            color: aqua;
        }
        div>ul>li{
            color: blueviolet;
        }

        .shandong>ul>.A{
            color: red;
        }

        div, p{
            color: blue;
        }
        .A, .B{
            color: yellow;
        }
        .shandong .A, p{
            color: purple;
        }
        a:link{
            color: red;
            text-decoration: none;
        }
        a:visited{
            color: orange;
        }
        a:hover{
            color: yellow;
        }
        a:active{
            color: green;
        }
        p { 
            width: 600px;
            height: 600px;

            font-family: '宋体';
            font-size: 50px;
            font-weight: 800;
            font-style: italic;
            font-style: normal;
            font: italic 800 100px '宋体'   ;

            color: rgb(128, 0, 128);
            color: #800080;
            color: rgb(128,0,128);

            text-align: right;
            text-decoration: overline;
            text-decoration: line-through;
            text-indent: 2em;
            line-height: 20px;

            background-color: aqua;
            background-image: url(image/中国风.png);
            background-repeat: no-repeat;

            background-position: 100px 200px;
            background-position: center center;
            background-size: 100px 200px;
            background-size: 100% 20%;
            background-size: cover;
            background-size: contain;

            border-radius: 300px;
            border-top-left-radius: 100px ;
            border-top-right-radius: 300px ;
            border-bottom-right-radius: 200px ;
            border-bottom-left-radius: 90px ;
         }
        *  {
                box-sizing: border-box;
            }
        div{ 
            height: 500px;
            width: 500px;
            background-color: aqua;
            border-width: 10px;
            border-style: dotted;
            border-color:blue;

            border-top: 20px;
            border-bottom: 10px solid orange;
            border-left: 10px solid yellow;
            border-right: 10px solid green;

            padding: 20px;
            padding-left: 10px;
            padding-right: 20px;
            padding-top: 30px;
            padding-bottom: 40px;
            padding: 20px 30px 40px;

            margin-left: 10px;
            margin-right: 20px;
            margin-top: 30px;
            margin-bottom: 40px;
            margin: auto 0;
            
         }
        strong{
            display: inline-block;
            width: 600px;
            height: 600px;
            background-color: red;
        }
        div { 
            background-color: blueviolet;
            width: 600px;
            height: 200px;
            display:flex;

            justify-content: flex-end;
            justify-content: center;
            justify-content: space-between;
            justify-content: space-around;
            align-items: center;

            align-items: flex-start;
            align-items: flex-end;
            align-items: space-between;
        }
        span{
            width: 80px;
            background-color: aqua;
        }
        header {
            width: 100%;
            height: 75px;
            background-color: lightsalmon;
        }
        footer {
            width: 100%;
            height: 75px;
            background-color:chocolate;
        }
        div {
            width: 100%;
            height:500px;
            background-color: aquamarine;
            display: flex;
            justify-content: space-between;
        }
        .left {
            width: 160px;
            background-color: rgb(43, 144, 226);
        }
        .right {
            width: 160px;
            background-color: chartreuse;
        }
        .content {
            width: calc(100% - 320px);
            background-color: bisque;
        }
    </style>
    <header>

    </header>
    <div>
        <span class="left"></span>
        <span class="content"></span>
        <span class="right"></span>
    </div>
    <footer>

    </footer>
    <div>
        <span>泉城济南，泉甲天下</span>
        <span>红瓦绿树，碧海蓝天</span>
        <span>齐风陶韵，生态淄博</span>
        <span>江北水城，运河古都</span>
    </div>
    <p>泉城济南，泉甲天下泉城济南，泉甲天下泉城济南，泉甲天下泉城济南，泉甲天下泉城济南，泉甲天下
    </p>
    <div class="shandong">
        <ul>
            <li class="A">泉城济南，泉甲天下</li>
            <li class="B">红瓦柳树，碧海蓝天</li>
            <li>齐风陶韵，生态淄博</li>
        </ul>
    </div>
    <div class="shanxi">
        <ol>
            <li class="A">塞上江南，神奇宁夏</li>
            <li class="B">人文陕西，山水秦岭</li>
            <li>传奇丝路，醉美甘肃</li>
        </ol>
    </div>

    <p class="blue" id="one">齐风陶韵，生态淄博 </p>
    <a href="#">好客山东欢迎你</a>
</body>
</html>